<script module lang="ts">
    import { defineMeta } from "@storybook/addon-svelte-csf";
    import Badge from "./Badge.svelte";
    import { fn } from "storybook/test";
    import Icon from "@iconify/svelte";
    import Avatar from "../Avatar/Avatar.svelte";
    import { Space } from "../Space";
    import type { BadgeProps } from "./Badge";
    import Summary from "../Table/Summary.svelte";

    const { Story } = defineMeta({
        title: "Components/Navigation/Badge",
        component: Badge,
        tags: ["autodocs"],
        argTypes: {
            status: {
                control: "select",
                options: ["success", "error", "processing", "warning", "default"],
            },
            type: {
                control: "select",
                options: ["primary", "success", "normal", "info", "error", "warning"],
            },
            color: {
                control: "select",
                options: ["blue", "green", "red", "yellow", "pink", "magenta", "volcano", "orange", "gold", "lime", "cyan", "geekblue", "purple"],
                table: {
                    type: { summary: "string | blue | green | red | yellow | pink | magenta | volcano | orange | gold | lime | cyan | geekblue | purple" },
                },
            },
            overflowCount: {
                description: "显示的上限值",
                table: {
                    defaultValue: { summary: "99" },
                },
            },
            offset: {
                description: "设置状态点的位置偏移",
            },
        },
        args: {},
    });
</script>

<Story name="Default" args={{ count: 3 }}>
    {#snippet template(args)}
        <Badge {...args}>
            <Avatar size={48} shape="square"></Avatar>
        </Badge>
    {/snippet}
</Story>

<Story name="Dot">
    {#snippet template(args)}
        <Space dir="h" size={24}>
            <Badge dot>
                <Avatar size={48} shape="square"></Avatar>
            </Badge>
            <Badge dot>
                <Icon icon="tabler:bell" width={32} height={32} />
            </Badge>
            <Badge dot>
                <a href="void(0)">可以是一个链接</a>
            </Badge>
        </Space>
    {/snippet}
</Story>

<Story name="OverflowCount">
    {#snippet template(args)}
        <Space dir="h" size={24}>
            <Badge count={100}>
                <Avatar size={48} shape="square"></Avatar>
            </Badge>
            <Badge count={1000} overflowCount={999}>
                <Avatar size={48} shape="square"></Avatar>
            </Badge>
        </Space>
    {/snippet}
</Story>

<Story name="Offset">
    {#snippet template(args)}
        <Badge count={100} offset={[-5, 10]}>
            <Avatar size={48} shape="square"></Avatar>
        </Badge>
    {/snippet}
</Story>

<Story name="NoChildren">
    {#snippet template(args)}
        <style>
            .demo-badge-alone .cm-badge-count {
                background: #5cb85c !important;
            }
        </style>
        <Space dir="h" size={50}>
            <Badge count={10} />
            <Badge count={10} class="demo-badge-alone" />
        </Space>
    {/snippet}
</Story>

<Story name="Status">
    {#snippet template(args)}
        <Space dir="v">
            <Space dir="h">
                <Badge status="success" />
                <Badge status="error" />
                <Badge status="default" />
                <Badge status="processing" />
                <Badge status="warning" />
            </Space>

            <Space dir="v">
                <Badge status="success" text="Success" />
                <Badge status="error" text="Error" />
                <Badge status="default" text="Default" />
                <Badge status="processing" text="Processing" />
                <Badge status="warning" text="Warning" />
            </Space>
        </Space>
    {/snippet}
</Story>

<Story name="Colors">
    {#snippet template(args)}
        <Space dir="v">
            <Badge color="blue" text="blue" />
            <Badge color="green" text="green" />
            <Badge color="red" text="red" />
            <Badge color="yellow" text="yellow" />
            <Badge color="pink" text="pink" />
            <Badge color="magenta" text="magenta" />
            <Badge color="volcano" text="volcano" />
            <Badge color="orange" text="orange" />
            <Badge color="gold" text="gold" />
            <Badge color="lime" text="lime" />
            <Badge color="cyan" text="cyan" />
            <Badge color="geekblue" text="geekblue" />
            <Badge color="purple" text="purple" />
            <Badge color="#2db7f5" text="#2db7f5" />
            <Badge color="#f50" text="#f50" />
        </Space>
    {/snippet}
</Story>

<Story name="Types">
    {#snippet template(args)}
        <Space dir="h" size={24}>
            {#each ["primary", "success", "normal", "info", "error", "warning"] as BadgeProps["type"][] as type}
                <Badge count={5} {type}>
                    <Avatar size={48} shape="square"></Avatar>
                </Badge>
            {/each}
        </Space>
    {/snippet}
</Story>
